
<html>

<head>
<!--JavaScript Time Picker v 0.1-->
<!--Author: Ben Ingmire (ben@itcohorts.com)-->
<!--This script is provided as/is with no warranty. It is still a work in progress. (Obvious guy says...)-->
<!--Please feel free to use this script, but leave credits intact-->
<!--Please feel free to update this script, but do so through google code -->

<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js" ></script>

<style>

div.datepicker {
 position: absolute;
 text-align: center;
 border: 1px #C4D5E3 solid;
 font-family: arial;
}
div.datepicker-header {
 font-size: 12px;
 font-weight: bold;
 background: #e9eff4;
 border-bottom:1px solid #c4d5e3;
 padding: 2px;
}
div.datepicker-footer {
 font-size: 10px;
 background: #e9eff4;
 border-top:1px solid #c4d5e3;
 cursor: pointer;
 text-align: center;
 padding: 2px;
}
div.datepicker-calendar {
 font-size: 11px;
 background:#FFFFFF;
 padding: 2px;
 text-align: left;
}
div.datepicker-calendar table {
 font-size: 10px;
 border: 1px white solid;
 margin: 0px;
 padding: 0px;
 text-align: center;
}
div.datepicker-calendar table tr {
 border: 1px white solid;
 margin: 0px;
 padding: 0px;
}
div.datepicker-calendar table td {
 border: 1px #eaeaea solid;
 margin: 0px;
 padding: 0px;
 text-align: center;
}
div.datepicker-calendar table td:hover,
div.datepicker-calendar table td.outbound:hover,
div.datepicker-calendar table td.today:hover {
 border: 1px #c4d5e3 solid;
 background: #e9eff4;
 cursor: pointer;
}
div.datepicker-calendar table td.wday {
 border: 1px #ffffff solid;
 background: #ffffff;
 cursor: text;
}
div.datepicker-calendar table td.outbound {
 background: #e8e4e4;
}
div.datepicker-calendar table td.today {
 border: 1px #16518e solid;
 background: #c4d5e3;
}

div.datepicker-validation {
 font-size: 11px;
 background:#FFFFFF;
 padding: 2px;
 text-align: left;
}

div.datepicker-validation li {
 color: red;
 text-align: left;
 padding-left: 20px;
 font-size: 10px;

}

input.datepicker { width:30px;}

</style>
<script>
	function TimePicker()
	{
		//------------------------------(ID Of Popup)
		var id_of_popup = '';

		this.GetIdOf_Popup = function() { return id_of_popup; }
		this.SetIdOf_Popup = function(_id) { id_of_popup = _id; }

		//------------------------------(ID Of Target)
		var id_of_target = '';

		this.GetIdOf_Target = function() { return id_of_target; }
		this.SetIdOf_Target = function(_id) { id_of_target = _id; }

		//------------------------------(ID Of Append To)
		var id_of_append_to = '';

		this.GetIdOf_AppendTo = function() { return id_of_append_to; }
		this.SetIdOf_AppendTo = function(_id) { id_of_append_to = _id; }

		//------------------------------(Hour + Minute Arrays)
		var hour_array = ['12','1','2','3','4','5','6','7','8','9','10','11'];
		var min_array = ['00','05','10','15','20','25','30','35','40','45','50','55'];

		this.GetHourArray = function() { return hour_array; }
		this.GetMinArray = function() { return min_array; }

		//------------------------------(AM/PM Array)
		var am_pm_array = ['AM', 'PM']

		this.GetAmPm = function() { return am_pm_array; }

		//------------------------------(Html)
		var html = '';
		this.SetHtml = function(_html) { if(html.length > 0) { html = html + _html;} else { html = _html;} }
		this.GetHtml = function() { return html;}

		//------------------------------(Style Class of the containing DIV)
		var hClass = '';
		this.SetHClass = function(_str) { hClass = _str; }
		this.GetHClass = function() { return hClass; }

		//------------------------------(Hour + Minute Lists With Attached Links)
		var hour_list = '';
		var min_list = '';

		this.SetHourList = function() { this.GetHourArray().each( function(item) {
															hour_list+='<a href=\'#\' onclick=\'SetUxHour('+item+',"'+ id_of_popup +'");return false;\'>'+ item +'</a>&nbsp;';
											});
										}
		this.GetHourList = function() { return hour_list; }

		this.SetMinList = function() { this.GetMinArray().each( function(item) {

															min_list+='<a href=\'#\' onclick=\'SetUxMin('+item+',"'+ id_of_popup +'");return false;\'>'+ item +'</a>&nbsp;';
											});
										}
		this.GetMinList = function() { return min_list; }

		//------------------------------(AM/PM List With Attached Links)

		var am_pm_list = '';

		this.SetAmPmList = function() { this.GetAmPm().each( function(item) {

															am_pm_list+='<a href=\'#\' onclick=\'SetUxAmPm("'+item+'","'+ id_of_popup +'");return false;\'>'+ item +'</a>&nbsp;';
												});
										}
		this.GetAmPmList = function() { return am_pm_list; }





	}

	function TimePickerInit( popID, targetID )
	{
		var ClassName = 'datepicker';

		obj = new TimePicker();
		obj.SetIdOf_Popup(popID);
		obj.SetIdOf_Target(targetID);
		obj.SetHtml('');
		obj.SetHClass(ClassName);
		obj.SetHourList();
		obj.SetMinList();
		obj.SetAmPmList();

		var divValidationMessage = new Element('div', { 'id': 'ValidationMessage_'+obj.GetIdOf_Popup(), 'class': obj.GetHClass()+'-validation', 'style': 'display:none;' } );
		var divContainer = new Element('div', { 'id': obj.GetIdOf_Popup(), 'class': obj.GetHClass(), 'style':'display:none;' } );
		var divHeader =    new Element('div', { 'id': 'my-header_' + obj.GetIdOf_Popup(), 'class': 'datepicker-header' }).update('Please Choose A Time');
		var divMainSelectionArea = new Element('div', { 'id': 'my-content_' + obj.GetIdOf_Popup(), 'class': 'datepicker-calendar' })
		var divFooter =    new Element('div', { 'id': 'my-footer_' + obj.GetIdOf_Popup(), 'class': 'datepicker-footer' }).update('');
		var divTimeHolder = new Element('div', { 'id': 'my-time-holder_' + obj.GetIdOf_Popup(), 'class': 'datepicker-calendar' }).update('');

		var inputHourTimeHolder = new Element('input', { 'id': 'Hour_' + popID, 'class':'datepicker' } );
		var inputMinTimeHolder = new Element('input', { 'id': 'Min_' + popID, 'class':'datepicker' } );
		var goButton = new Element('a', {'id':'my-go-button'+obj.GetIdOf_Popup(), 'style':'padding-left:5px;', 'href': 'javascript: if(TimePickerValidate("'+popID+'")){ SetUxTarget("'+popID+'","'+targetID+'"); } ' } ).update('[Go]'); //obj.SetUxTarget( $("Hour_"+obj.GetIdOf_Popup()).value  ,  $("Min_"+obj.GetIdOf_Popup()).value );
		var cancelButton = new Element('a',{'id':'my-cancel-button'+popID, 'href': 'javascript: FireCancelButton("'+popID+'");', 'style':'padding-left:5px;' } ).update('[Cancel]');

		//add HTML to the Main Object. This will be added to to the div in the next code block
		obj.SetHtml( 'Hour: ' );
		obj.SetHtml( obj.GetHourList() );
		obj.SetHtml( '<br/>' );
		obj.SetHtml( 'Minute: ' );
		obj.SetHtml( obj.GetMinList() );
		obj.SetHtml( '<br/>' );
		obj.SetHtml( obj.GetAmPmList() );


		//add the html to the main selection area.
		$(divMainSelectionArea).update( obj.GetHtml() );

		//add the input object ot the main time holder area.
		$(divTimeHolder).appendChild( new Element('label').update('Hour: ') );
		$(divTimeHolder).appendChild( inputHourTimeHolder );
		$(divTimeHolder).appendChild( new Element('label').update('Minute: ') );
		$(divTimeHolder).appendChild( inputMinTimeHolder );
		$(divTimeHolder).appendChild( new Element('label',{'id': 'lblAmPm_'+obj.GetIdOf_Popup(), 'style': 'font-weight:bold;' }) );
		$(divTimeHolder).appendChild( goButton );
		$(divTimeHolder).appendChild( cancelButton );

		//put all the pieces together in order.

		$(divContainer).appendChild( divHeader );
		$(divContainer).appendChild( divValidationMessage );
		$(divContainer).appendChild( divTimeHolder );
		$(divContainer).appendChild( divMainSelectionArea );
		$(divContainer).appendChild( divFooter );


		//put the object on the DOM
		//$(targetID).appendChild( divContainer );

		//document.body.appendChild( divContainer );
		$(targetID).insert( {'after':$(divContainer) });

		//create an onfocus event for tabbing to the parent object (textbox)
		$(targetID).onfocus = function() {



			Effect.Appear( popID );
		}

		//create a duplicate onclick event for clicking to the parent object
		$(targetID).onclick = function() {


			Effect.Appear( popID );
		}

		//make the window draggable.
		new Draggable( popID );
	}




//------------------------------( UX Functions / Set the User Interface )

		function SetUxHour(_item,_id) { _item = ((_item<10)?"0"+_item : _item); $('Hour_'+_id).value=_item;}
		function SetUxMin (_item,_id) { _item = ((_item<10)?"0"+_item : _item); $('Min_'+_id).value=_item;}
		function SetUxAmPm (_item,_id) { $('lblAmPm_'+_id).update(_item); }
		function SetUxTarget(_id,_idtarget){
										//Get the item values.
										var _itemHour = $("Hour_"+_id).value;
										var _itemMin = $("Min_"+_id).value;
										var _ampm= $("lblAmPm_"+_id).innerHTML ;

										//Set the value of the text box.
										$(_idtarget).value = _itemHour+":"+_itemMin+' '+_ampm;

										//Close the Popup.
										Effect.Fade(_id);
									}

		function TimePickerValidate(_id){
						var tf = true;
						var msg = '';
						if ( $("Hour_"+_id).value.length ==0 )
						{
							tf = false;
							msg+='<li>Hour Required</li>';
						}
						if ( $("Min_"+_id).value.length ==0 )
						{
							tf = false;
							msg+='<li>Minute Required</li>';
						}
						if ( $('lblAmPm_'+_id).innerHTML.length ==0 )
						{
							tf = false;
							msg+='<li>AM/PM Required</li>';
						}

						if (!tf) {
						//turn on validation message.

							Effect.Appear( $('ValidationMessage_' + _id).update(msg) );

							$('ValidationMessage_' + _id).setOpacity(1.0);

						}
						else {
							Effect.Fade( $('ValidationMessage_' + _id).update('') );
							$('ValidationMessage_' + _id).setOpacity(1.0);
						}

						return tf;
					}
      function FireCancelButton(_id)
      {
        Effect.Fade(_id);
      }



</script>


</head>


<body>

<div id="bodyDiv"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type='text' name='x' id='time1' value='' />
<script>TimePickerInit('myPopUp','time1'); </script>

<input type='text' name='x' id='time2' value='' />
<script>TimePickerInit('myPopUpX','time2'); </script>

<hr/>
To Do: if current value in the time field, parse and select.

</body>

</html>




